<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>mark-board</title>
</head>
<style>
  * {
    box-sizing: border-box;
  }

  .remark {
    position: relative;
  }

  .remark:hover div {
    display: block;
  }

  .remark div {
    background: #fff;
    position: absolute;
    display: none;
    z-index: 999;
  }

  #mark-list {
    height: 100%;
    width: 200px;
    overflow: auto;
  }

  .mark-board-box {
    display: flex;
    height: calc(100vh - 200px);
  }

  .mark-operate svg {
    width: 24px;
    height: 24px
  }

  .GitHub-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
  }
</style>

<body style="width:80%;margin: 0 auto;max-width: 1440px;">
  <h3 style="margin: 0;">JS canvas-mark-board Demo:</h3>
  <div>
    <div class="mark-operate">
      <span class="mark-shape-list"></span>
      <button id="upload">上传图片</button>
      <button id="clear">清空画布</button>
      <button id="importJson">导入JSON</button>
      <button id="creact">创建</button>
      <button id="destroy"> 销毁</button>
      标签名：<input id="labelInput" type="text" value="person" />
      颜色：<input id="colorInput" type="color" value="#ff0000" />
      <a class="remark">
        操作说明?
        <div>
          <b>画布操作</b>：1.双击鼠标恢复大小; 2.ctrl或cmd或alt+滚轮缩放;
          3.按住空格拖动画布
          <br />
          <b>多边形绘制</b>：1.右键删除最后一个点;
          2.点击第一个点或者按回车完成绘制
          <br />
          <b>其他操作</b>：1.可以点击图形然后拖动，调整点拖动改变大小;
          2.按Delete键删除对象
          <br />
        </div>
      </a>
    </div>
  </div>

  <div class="mark-board-main">
    <div class="mark-board-box">
      <div style="flex:1">
        <div id="mark-box" style="width:100%;height:100%;border: 1px solid black;"></div>
      </div>
      <div id="mark-list">
      </div>
    </div>
  </div>

  <a class='GitHub-icon' target="_blank" href="https://github.com/zhuguibiao/canvas-mark-board">
    <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true"
      class="octicon octicon-mark-github v-align-middle color-fg-default">
      <path
        d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
      </path>
    </svg>
    <span>GitHub</span>
  </a>

  <textarea style="width:100%;height:100%;" id="textarea" cols="30" rows="10"></textarea>
  <script type="module" src="/index.ts"></script>
</body>

</html>